<template>
  <el-dialog  :close-on-click-modal="closeonclickmodal"   :title="getdialogTitle()" @open="listenopen()" @close="close" :visible="dialogshow">
    <el-form :id="target" :model="dialoginfo" ref="dialoginfo" label-position="left" >
      <el-row>
        <el-col :span="10">
          <el-form-item v-if="!isadd"
                         prop="id" label="菜单ID" :label-width="formLabelWidth">
            <el-input  disabled v-model="dialoginfo.id" auto-complete="off" clearable></el-input>
          </el-form-item>
          <el-form-item  :rules="[{ required: true, message: '不能为空'}]"
                          prop="name" label="菜单名称" :label-width="formLabelWidth">
            <el-input  v-model="dialoginfo.name" auto-complete="off" clearable></el-input>
          </el-form-item>
          <el-form-item
                        prop="path" label="菜单URI" :label-width="formLabelWidth">
            <el-input  v-model="dialoginfo.path" auto-complete="off" clearable></el-input>
          </el-form-item>
          <el-form-item
                        prop="desc" label="菜单描述" :label-width="formLabelWidth">
            <el-input   v-model="dialoginfo.desc" auto-complete="off" clearable></el-input>
          </el-form-item>
          <el-form-item id="privateType"
                      prop="type" label="菜单类型" :label-width="formLabelWidth">
            <el-switch
              @change="handlerMenuTypeChange"
              active-text="根菜单"
              inactive-text="子菜单"
              :active-value=1
              :inactive-value=2
              v-model="dialoginfo.type"
              active-color="#409EFF"
              inactive-color="#F56C6C">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="10">
          <el-form-item
                        prop="group" label="菜单组别" :label-width="formLabelWidth">
            <el-input   v-model="dialoginfo.group" auto-complete="off" clearable></el-input>
          </el-form-item>
          <el-form-item
                        prop="sort" label="菜单序号" :label-width="formLabelWidth">
            <el-input   v-model="dialoginfo.sort" auto-complete="off" clearable></el-input>
          </el-form-item>
          <el-form-item :rules="[{ required: true, message: '不能为空'}]"
                        prop="open" label="是否公开" :label-width="formLabelWidth">
            <el-switch
              style="color:#ffffff"
              active-text="关"
              inactive-text="开"
              :active-value=false
              :inactive-value=true
              v-model="dialoginfo.open"
              active-color="#ff4949"
              inactive-color="#13ce66">
            </el-switch>
          </el-form-item>
          <el-form-item
            prop="parent" label="父菜单ID" :rules="[{ required: true, message: '不能为空'}]" :label-width="formLabelWidth">
            <el-input v-model="dialoginfo.parent" auto-complete="off" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item style="text-align: right">
          <el-button size="mini" @click="dialogshow = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="toaddPerm('dialoginfo')">确 定</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
  export default {
    data() {
      return {
        target:"dialogMenu",
        isajax:false,
        loadingTxt:"",
        closeonclickmodal:false,
        formLabelWidth: '90px'
      }
    },
    props:['dialogshow','dialoginfo','isadd'],
    methods:{
      getdialogTitle(){
        return this.isadd==true?"新增系统菜单":"修改系统菜单";
      },
      listenopen(){
        if(this.isadd&&this.$refs['dialoginfo']!=null){
          this.$refs['dialoginfo'].resetFields();
        }
      },
      close(){
        this.$emit('changedialogshow')
      },
      handlerMenuTypeChange(val){
        // console.log(val);
        this.dialoginfo.type=val;
      },
      toaddPerm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.commit("saveLoadingMap",{"target":this.isadd?this.proAPI.URLS.addSysMenu:this.proAPI.URLS.modifySysMenu,text:this.loadingTxt});
            this.proAPI.postJson(this.isadd?this.proAPI.URLS.addSysMenu:this.proAPI.URLS.modifySysMenu,this.dialoginfo).then((res) =>{
                  this.$message.success({
                    "message":res.message
                  })
                  setTimeout(()=>{
                    this.$emit("reload");
                  },1000)
              });
          }else{
              return false;
          }
        });
      }
    },
    updated(){
    },
    mounted(){
      // console.log(this.dialoginfo)
    }
  };
</script>
<style>
  .el-switch__label{
    position: absolute;
    display: none;
    color: #fff;
  }
  .el-switch__label--left {
    z-index: 9;
    left: 20px;
  }
  .el-switch__label--right {
    z-index: 9;
    left: -5px;
  }
  .el-switch__label.is-active {
    display: block;
  }
  #privateType .el-switch__core{
    width:80px !important
  }
  .el-switch__label.is-active{
    color:#ffffff
  }

</style>
